/*
  为什么要建这个仓库?
  - 让路由规则对象数组变成响应式
  - 这样动态添加进来的路由规则对象就能影响左侧的菜单展示
*/
import { constantRoutes, asyncRoutes } from '@/router'

const state = {
  // 作用: 动态控制左侧菜单
  routes: constantRoutes
}

const mutations = {
  // 1. 根据不同用户信息中的menus数组, 在原有的数组基础上添加新的路由规则对象
  // otherRoutes: 要追加进来的路由对象数组
  setRoutes(state, otherRoutes) {
    state.routes = [...constantRoutes, ...otherRoutes]
  }
}

const actions = {
  // 1. 根据menus数组去筛选路由
  filterRoutes(ctx, menus) {
    console.log(menus, asyncRoutes, '888888')
    // 1.1 根据menu筛选出该用户所拥有的动态路由对象
    const otherRoutes = asyncRoutes.filter(item => {
      return menus.includes(item.children[0].name)
    })
    // console.log(otherRoutes, '6666')
    // 1.2 提交mutation
    ctx.commit('setRoutes', otherRoutes)
    // 1.3 返回筛选出的数组给外部使用
    return otherRoutes
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
